<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>print_A4_table_5rows_02</title>
	<style>
		@page {
			margin-top: 0;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
		}
		@media print{
			body {
				background: #fff;
				margin-top: 0;
				margin-bottom: 0;
				margin-left: 0;
				margin-right: 0;
			}
			.notShow {
				display: none;
			}
		}
	</style>
	<script type="text/javascript" src="../third-party/jquery-1.10.2.min.js"></script>
</head>
<body>

<input class="notShow" type="button" id="printBtn" value="打印"/>
<hr class="notShow">
<!-- 
	22+22+24+1018+22=1108
	height=1108,width=(56+668+56,780)
	宽度不用说,就是56+668+56的布局
	高度,总高度是1108,分成五份,上下各24的留白,中间共1060,再分成三份
 -->
<table id="page_1" style="border:1px solid red;margin:0;padding:0;overflow:hidden;">
	<tr height="24px">
		<td colspan="2" style="margin:0;padding:0;"></td>
	</tr>
	<tr height="22px" class="tr_head">
		<td width="56px" style="margin:0;padding:0;"></td>
		<td width="668px" style="margin:0;padding:0;overflow:hidden;">
			11<br>
			22<br>
		</td>
	</tr>
	<tr height="984px" class="tr_main">
		<td width="56px" style="margin:0;padding:0;"></td>
		<td width="668px" style="margin:0;padding:0;"></td>
	</tr>
	<tr height="54px" class="tr_foot">
		<td width="56px" style="margin:0;padding:0;"></td>
		<td width="668px" style="margin:0;padding:0;"></td>
	</tr>
	<tr height="24px">
		<td colspan="2" style="margin:0;padding:0;"></td>
	</tr>
</table>
<hr class="notShow">

<script type="text/javascript">
	$(function(){
		$('#printBtn').on('click', function(){
			var $ifr_00 = $('#ifr_00');
			if($ifr_00[0]){
				$ifr_00.remove();
			}
			var tplIfr = '<iframe id="ifr_00" style="width:0;height:0;"></iframe>';
			$('body').append( tplIfr );
			setTimeout(function(){
				$ifr_00 = $('#ifr_00');
				if($ifr_00[0]){
					var _ifr = $ifr_00[0];
					var _doc = _ifr.contentWindow.document;
					_doc.open();
					_doc.write('<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title></title>');
					
					// 从当前页面抽取样式"style"
					_doc.write( $('style', document)[0].outerHTML );
					
					_doc.write('</head><body>');
					
					// 从当前页面抽取"table"元素
					_doc.write($('table', document.body)[0].outerHTML);
					
					_doc.write( '<script type="text\/javascript">window.onload=function(){window.print();};<\/script>' );
					_doc.write('</body></html>');
					
					_doc.close();
				}
			}, 0);
		});
	});
</script>

</body>
</html>